<template>
  <el-main>
    <el-row>
      <el-col :span="6" :offset="2">
        <div>
          <el-card shadow="hover" @click.native="redirectPage(1)">
            <img src="../assets/list-1.jpeg" />
            <div class="textContent">
              <div class="title">Python程序设计基础</div>
              <span
                >记录了学习Python基础时的作业情况，包括：turtle海龟作图，word自动化写贺卡,excel自动画图解决八皇后问题，基于QT的七巧板游戏，基于QT的自动作图软件。</span
              >
              <div><time class="time">2022-5-24</time> <a>前往</a></div>
            </div>
          </el-card>
          <div class="bottomMsg"></div>
        </div>
      </el-col>
      <el-col :span="6" :offset="1">
        <div>
          <el-card shadow="hover" @click.native="redirectPage(2)">
            <img src="../assets/list-2.png" />
            <div class="textContent">
              <div class="title">我的主页</div>
              <span
                >一个基于Vue和ElementUI搭建的静态页面，作为熟悉Vue的练习项目。</span
              >
              <div><time class="time">2022-8-8</time> <a>前往</a></div>
            </div>
          </el-card>
          <div class="bottomMsg"></div>
        </div>
      </el-col>
      <el-col :span="6" :offset="1">
        <div>
          <el-card shadow="hover" @click.native="redirectPage(3)">
            <img src="../assets/list-3.jpeg" />
            <div class="textContent">
              <div class="title">英雄联盟闪退程序</div>
              <span
                >利用Python强制关闭LOL进程,开局每5分钟左右闪退一次。附带bat脚本自动安装到开机自启动</span
              >
              <div><time class="time">2022-3-30</time> <a>前往</a></div>
            </div>
          </el-card>
          <div class="bottomMsg"></div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="2">
        <div>
          <el-card shadow="hover" @click.native="redirectPage(4)">
            <img src="../assets/list-4.jpeg" />
            <div class="textContent">
              <div class="title">AnswerBox</div>
              <span>记录了许多的Homework。</span>
              <div><time class="time">2022-5-24</time> <a>前往</a></div>
            </div>
          </el-card>
          <div class="bottomMsg"></div>
        </div>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      resAddress: [
        "https://gitee.com/captainzw/python-chengyuDragon",
        "https://gitee.com/captainzw/captainzw",
        "https://gitee.com/captainzw/LegendService",
        "https://gitee.com/zyzalexander/AnswersBox",
      ],
    };
  },
  methods: {
    redirectPage(index) {
      console.log("yes");
      this.$confirm("即将跳转到gitee仓库中", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        window.open(this.resAddress[index - 1], "_blank");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-main {
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  .el-row {
    margin-top: 40px;

    > div {
      position: relative;
    }
    .el-card {
      cursor: pointer;
      .textContent {
        height: 120px;
      }
      div {
        margin-top: 10px;
        .title {
          font-weight: 700;
          font-size: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span {
          margin-top: 10px;
          height: 62px;
          text-overflow: ellipsis;
          overflow: hidden;
          font-weight: 500;
          font-size: 16px;
          text-align: left;
          text-indent: 32px;
          display: inline-block;
        }
        div:last-child {
          position: relative;
          time {
            position: absolute;
            left: 20px;
            font-size: 14px;
            color: gray;
          }
          a {
            color: #40aaff;
            font-size: 14px;
            position: absolute;
            right: 20px;
          }
        }
      }
    }
    .bottomMsg {
      position: absolute;
      display: inline-block;
      height: 6px;
      width: 100%;
      left: 0;
      background-color: #6e85b7;
    }
    img {
      height: 20vh;
    }
  }
  .el-row:first-child {
    margin-top: 0px;
  }
}
</style>